<template>
    <div class="detail-page">
        <CommonHeader>
            <div>北京市开放科技论文与科学数据资源共享平台</div>
        </CommonHeader>
        <div class="common-wrap">
            <div>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <!-- <el-breadcrumb-item>文章</el-breadcrumb-item> -->
                    <el-breadcrumb-item>文章详细内容</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div v-loading="loading" class="detail-wrap">
                <div class="detail-left">
                    <div class="detail">
                        <div class="info">
                            <div class="header">
                                <a class="header-link" target="_blank" style="color: blue;">{{ info.oacollectiontitle }}</a>
                                <span class="header-date">{{ info.oapublicationdate }}</span>
                            </div>
                            <div class="title">{{ info.oatitle }}</div>
                            <div class="tag">Article</div>
                            <p>
                                <!-- <span>{{ info.oaauthors?.join(';') }}</span> -->
                                <!-- <span v-html="formatAuthor('B. Khani Robati|0;M. Haji Shaabani|0;')"></span> -->
                                <span v-html="formatAuthor(info.oacontributortoinsstr, 3)"></span>
                            </p>

                            <div class="toggle-text" v-show="!toggleState" @click="toggleState = true">
                                <i class="el-icon-plus" />
                                <div class="text">show affiliations</div>
                            </div>
                            <div class="toggle-text" v-show="toggleState" @click="toggleState = false">
                                <i class="el-icon-minus" />
                                <div class="text">hide affiliations</div>
                            </div>

                            <div class="orgContent" v-show="toggleState">
                                <div v-for="(t, i) in info.oacontributorinstitutionnames || []" :key="i">
                                    <p>{{ i + 1 }} {{ t }}</p>
                                </div>
                            </div>
                            <!-- <p>出版年份: {{ info.oapdateyear }}</p> -->
                            <p>DOI: {{ info.oadoi?.join(' ') }}</p>
                            <p>
                                <span>Published：{{ info.oapublicationdate }}</span>
                            </p>

                            <div class="article-share">
                                <template v-if="info.oaaccessurls">
                                    <a class="share-link" :href="info.oaaccessurls"
                                        target="_blank">原文链接</a> &nbsp;
                                    <img src="@/assets/img/link.png" style="height: 20px;">
                                </template>
                                <template v-if="info.oaaccessurls && info.oajapdfroid">
                                    &nbsp; | &nbsp;
                                </template>
                                <a v-show="info.oajapdfroid" class="share-link" 
                                    :href="'http://gooa.las.ac.cn/apipaperc/api/paper/pdfdown?wid='+ info.oaworkid + '&roid=' + info.oajapdfroid"
                                    target="_blank">全文</a>&nbsp;
                                <img v-show="info.oajapdfroid" src="@/assets/img/pdf.png" style="height: 20px;">&nbsp;
                            </div>


                            <!-- <div class="article-share">
                                <a style="margin-right: 10px" class="share-link"
                                    href="http://dx.doi.org/10.1038/s41598-023-33753-4" target="_blank">
                                    <img src="@/assets/img/article.png" style="width: 20px;">PDF
                                </a>&nbsp;

                                <a class="share-link" href="http://dx.doi.org/10.1038/s41598-023-33753-4" target="_blank">
                                    <img src="@/assets/img/link.png" style="height: 20px;">原文链接
                                </a>
                            </div> -->
                        </div>
                        <div>
                            <h2 class="sub-title">摘要</h2>
                            <p>{{ info.oaabstract }}</p>
                            <!-- <div class="export-part">
                                <el-select v-model="exportValue" style="width: 100px;">
                                    <el-option value="ris" label="-RIS----">-RIS----</el-option>
                                    <el-option value="bib" label="-BibTeX-">-BibTeX-</el-option>
                                </el-select>
                                <el-button style="margin-left: 10px">导出引文和摘要</el-button>
                            </div> -->
                        </div>
                        <div>
                            <h2 class="sub-title">授权许可</h2>
                            <p>© The Author(s) 2023</p>
                            <p>{{ info.oapermissions?.join(' ') }}</p>
                        </div>
                        <div>
                            <h2 class="sub-title">关键词</h2>
                            <p>{{ info.oakeywords?.join(',') }}</p>
                        </div>
                        <div>
                            <h2 class="sub-title">推荐引用方式</h2>
                            <p>
                                {{ info.oaauthors?.join(';') }} 
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                {{ info.oatitle }}
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                {{ info.oacollectiontitle }}
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                {{ info.oapdateyear }}
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                DOI: {{ info.oadoi?.join(' ') }}
                            </p>
                        </div>
                        <div>
                            <!-- <div>
                                <h2 class="sub-title">推荐引用方式</h2>
                                <p><span>Guang He;Yi Shi;Fan Yuan etc.</span><span>Waist circumference mediates the
                                        association between rs1260326 in GCKR gene and the odds of lean NAFLD.
                                    </span><span>Scientific Reports, </span><span>Scientific Reports,
                                    </span><span>(2023). </span><span>DOI:
                                        10.1038/s41598-023-33753-4</span></p>
                            </div>
                            <div>
                                <h2 class="sub-title">您觉得这篇文章对您有帮助吗？</h2>
                                <div>
                                    <el-rate size="large" v-model="star"></el-rate>
                                </div>
                                <el-button style="margin-top:10px" size="small">提交</el-button>
                            </div> -->
                            <!--本文评论-->
                            <!-- <div class="common_list">
                                <h2 class="sub-title">本文评论</h2>
                                <div>
                                    <el-input type="textarea" :rows="5" placeholder="请在此发表评论" v-model="textarea">
                                    </el-input>
                                    <el-button style="margin-top:10px" size="small">发表评论</el-button>
                                </div>
                            </div> -->
                            <!--分享-->
                            <!-- <div class="share">
                                <h2 class="sub-title">分享</h2>
                                <div class="share-icon-wrap">
                                    <img src="@/assets/img/wechat.png" style="height: 20px;">&nbsp;
                                    <img src="@/assets/img/qzone.png" style="height: 20px;">&nbsp;
                                    <img src="@/assets/img/weibo.png" style="height: 20px;">&nbsp;
                                    <el-tooltip class="item" effect="dark" content="0" placement="right">
                                        <div class="share-count">0</div>
                                    </el-tooltip>
                                </div>
                            </div> -->
                            <!-- <div>
                                <h2 class="sub-title">参考文献</h2>
                                <p>
                                    <span>[1] CD Byrne, G TargherNAFLD: a multisystem diseaseJ.
                                        Hepatol.201562S476410.1016/j.jhep.2014.12.01225920090</span>
                                </p>
                                <p>
                                    <span>[2] ZM YounossiNon-alcoholic fatty liver disease—A global public health
                                        perspectiveJ. Hepatol.20197053154410.1016/j.jhep.2018.10.03330414863</span>
                                </p>
                                <p>
                                    <span>[3] S Vilarinho, V Ajmera, M Zheng, R Loomba et al.Emerging role of genomic
                                        analysis in clinical evaluation of lean individuals with
                                        NAFLDHepatology2021742241225010.1002/hep.3204734233030
                                    </span>
                                </p>
                                <p>
                                    <span>[4] R Younes, E BugianesiNASH in lean individualsSemin. Liver
                                        Dis.20193986951:CAS:528:DC%2BC1MXhtl2qtbc%3D10.1055/s-0038-167751730654392
                                    </span>
                                </p>
                                <p>
                                    <span>[5] Q YeGlobal prevalence, incidence, and outcomes of non-obese or lean
                                        non-alcoholic fatty liver disease: A systematic review and meta-analysisLancet
                                        Gastroenterol. Hepatol.2020573975210.1016/S2468-1253(20)30077-732413340
                                    </span>
                                </p>
                                <p>
                                    <span>[6] Kwon, E., Nah, E. H., Kim, S. &amp; Cho, S. Relative Lean Body Mass and
                                        Waist
                                        Circumference for the Identification of Metabolic Syndrome in the Korean General
                                        Population. Int. J. Environ. Res. Public Health18.
                                        https://doi.org/10.3390/ijerph182413186 (2021).
                                    </span>
                                </p>
                                <p>
                                    <span>[7] S WangRelationship between waist circumference trajectory and new-onset
                                        non
                                        alcoholic fatty liver disease in the non-obese populationZhonghua Liu Xing Bing
                                        Xue Za
                                        Zhi2020418248281:CAS:528:DC%2BB3cXhvVKrt7bP10.3760/cma.j.cn112338-20190630-0047932564543
                                    </span>
                                </p>
                                <p>
                                    <span>[8] M AhadiA review of non-alcoholic fatty liver disease in non-obese and lean
                                        individualsJ. Gastroenterol.
                                        Hepatol.2021361497150710.1111/jgh.1535333217052
                                    </span>
                                </p>
                                <p>
                                    <span>[9] M Eslam, L Valenti, S RomeoGenetics and epigenetics of NAFLD and NASH:
                                        Clinical impactJ.
                                        Hepatol.2018682682791:CAS:528:DC%2BC2sXhslymt7vO10.1016/j.jhep.2017.09.00329122391
                                    </span>
                                </p>
                            </div> -->
                            <!-- <div class="left_menu">
                                <ul>
                                    <li>Figures</li>
                                    <li>References</li>
                                    <li>Comments</li>
                                </ul>
                            </div> -->
                        </div>
                    </div>
                </div>
                <div class="detail-right">
                    <div class="right-name">相关文章</div>
                    <ul class="collection-list">
                        <li class="collection-item" v-for="(item, index) in info.relatedOa || []" :key="index">
                            <div class="index">{{ index + 1 }}.</div>
                            <div class="link" @click="$router.push(`/detail/${item.id}`)">{{ item?.oatitle }}</div>
                        </li>
                    </ul>
                    <div v-if="!info.relatedOa || info.relatedOa?.length === 0" style="padding: 4px">暂无相关文章</div>
                    <div class="right-name">相关数据集</div>
                    <ul class="collection-list">
                        <li class="collection-item" v-for="(item, index) in info.relatedDs || []" :key="index">
                            <div class="index">{{ index + 1 }}.</div>
                            <div class="link" @click="$router.push(`/data/${item.id}`)">{{ item?.datasetNameCn }}</div>
                        </li>
                    </ul>
                    <div v-if="!info.relatedDs || info.relatedDs?.length === 0" style="padding: 4px">暂无相关数据集</div>
                </div>
            </div>
        </div>
        <CommonFooter />
    </div>
</template>

<script>
import { post } from '@/common/request';
export default {
    name: 'detail-page',
    data() {
        return {
            star: 0,
            point: 2,
            textarea: '',
            toggleState: false,
            exportValue: "ris",
            info: {},
            loading: false,
        }
    },
    watch: {
        '$route.params.id'() {
            this.getDetail()
        }
    },
    mounted() {
        this.getDetail()
    },
    methods: {
        async getDetail() {
            this.loading = true
            const sid = this.$route.params.id;
            const res = await post('/dataset/dsOrOaDetail', {
                type: 2,
                sid
            }).catch(err => ({
                message: String(err)
            }));
            this.loading = false
            if (res?.code === 200) {
                this.info = res.data || {}
            }
        },
        //分享到QQ空间
        shareQQ(title, cid, picurl) {
            let url = this.getShareUrl(cid);
            let shareqqzonestring = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=' +
                encodeURIComponent(title) +
                '&url=' + encodeURI(url) + '&pics=' + picurl;
            window.open(shareqqzonestring, '_blank');
            //注意：仅分享不累记次数
        },
        //分享到新浪微博
        shareSina(title, cid, picurl) {
            let url = this.getShareUrl(cid);
            var sharesinastring = 'http://v.t.sina.com.cn/share/share.php?title=' + encodeURIComponent(title) +
                '&url=' + url +
                '&content=utf-8&sourceUrl=' + encodeURI(url) + '&pic=' + picurl;
            window.open(sharesinastring, '_blank');
            //注意：仅分享不累记次数
        },
        //分享到微信，只复制地址
        shareWechat(title) {
            navigator.clipboard.writeText(title).then(() => {
                this.$message.success('已复制到剪切板')
            })
        },
        getShareUrl(cid) {
            return window.location.origin + '/#/paper?coid=' + cid;
        },
        formatAuthor(str, limit) {
            if(!str){
                return ''
            }
            const rawStrAry = str?.split(';')
            const strAry = rawStrAry?.slice(0, limit).map(v => {
                if(!v){
                    return ''
                }
                return (
                    `${v.split('|')[0]} <span style="font-size: 12px; position: relative; top: -6px">${+v.split('|')[1] +1 || 1}</span> `

                )
            })
            let elStr = ''
            strAry.forEach(strEl => {
                elStr+=strEl
            })
            if(rawStrAry.length > limit){
                elStr+=' etc.'
            }
            return elStr
        }
    }
}
</script>

<style lang="less" scoped>
/deep/ .el-checkbox .el-checkbox__inner {
    border-color: #aaa;
}

.detail-wrap {
    margin-top: 20px;
    display: flex;

    .detail-left {
        margin-right: 20px;
        flex: 1;
    }
}

.detail {
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #d9d9d9;
    padding-bottom: 100px;
    position: relative;

    .left_menu {
        position: fixed;
        top: 320px;
        margin-left: -60px;

        ul li {
            direction: ltr;
            writing-mode: tb-rl;
            margin-top: 10px;
            color: white;
            background: #3457b8;
            padding: 10px;
        }
    }

    .title {
        font-size: 20px;
        color: #323232;
        padding: 10px 0;
        font-weight: bold;
        margin: 0;
    }

    .sub-title {
        padding: 20px 0 5px;
        font-size: 16px;
        color: #323232;
        font-weight: bold;
        border-bottom: 1px solid #c8c8c8;
    }

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;

        .header-link {
            text-decoration: none;
            color: @darkColor;
        }

        .header-date {
            color: @lightColor;
        }
    }

    .toggle-text {
        padding: 10px 0;
        display: flex;
        align-items: center;
        cursor: pointer;

        icon {
            margin-right: 4px;
            font-size: 12px;
            font-weight: bold;
            color: @darkColor;
            border: 2px solid @darkColor;
        }

        .text {
            font-size: 12px;
            font-weight: bold;
            color: #000;
        }
    }

    .orgContent {
        font-size: 14px;
        line-height: 24px;
        color: #000;
    }

    .article-share {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #666;
    }

    .share-link {
        display: flex;
        align-items: center;
        color: #007BFF;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }

    .share-icon-wrap {
        display: flex;
        align-items: center;
    }

    .share-count {
        margin-left: 10px;
        padding: 2px 6px;
        font-size: 12px;
        border: 1px solid #aaa;
        cursor: pointer;
    }

    .export-part {
        display: flex;
        justify-content: flex-end;
    }

    .tag {
        padding: 2px 20px;
        display: inline-block;
        font-size: 14px;
        background: #F6AE00;
        color: #fff;
        border: none;
        cursor: pointer;
    }

    p {
        color: #747474;
        font-size: 14px;
        line-height: 30px;
    }

    /deep/ .el-rate {
        height: 40px;

        .el-rate__icon {
            font-size: 30px;
        }
    }

}

.detail-right {
    width: 260px;
    border: 2px solid @primaryColor;

    .right-name {
        padding: 6px 0;
        font-size: 18px;
        font-weight: bold;
        line-height: 30px;
        text-align: center;
        color: #fff;
        background: @primaryColor;
    }

    .collection-list {
        .collection-item {
            padding: 6px 10px;
            display: flex;
            font-size: 14px;
            color: #000;
            line-height: 24px;

            .index {
                min-width: 26px;
                width: 26px;
            }

            .link {
                flex: 1;
                line-height: 20px;
                cursor: pointer;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}
</style>